<template>
  <div class="app-container">
      <el-form :inline="true" :model="listQuery" class="demo-form-inline" @submit.native.prevent>
        <el-form-item label="团购分类">
          <el-select
            class="toolbar-lable-right"
            v-model="listQuery.q_type"
            placeholder="请选择" size="small">
            <el-option
              v-for="item in actGroupTypes" :label="item.name" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动状态">
          <el-select
            class="toolbar-lable-right"
            v-model="listQuery.q_activityState"
            placeholder="请选择" size="small">
            <el-option
              v-for="item in activityStates"
              :label="item.name"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审核状态">
          <el-select
            class="toolbar-lable-right"
            v-model="listQuery.q_state"
            placeholder="请选择" size="small">
            <el-option
              v-for="item in states"
              :label="item.name"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="small" @click="this.getList">查询</el-button>
          <el-button icon="el-icon-refresh" size="small" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>

      <div class="button-table-margin">
        <el-button size="small" type="primary" @click="look" v-permission="['/admin/promotion/actgroup/look']">详情</el-button>
        <el-button size="small" type="primary" @click="edit" v-permission="['/admin/promotion/actgroup/update']">编辑</el-button>
        <el-button size="small" type="primary" @click="gridUp" v-permission="['/admin/promotion/actgroup/auditYes']">审核通过</el-button>
        <el-button size="small" type="primary" @click="gridDown" v-permission="['/admin/promotion/actgroup/auditNo']">审核驳回</el-button>
        <el-button size="small" type="primary" @click="del" v-permission="['/admin/promotion/actgroup/releaseFinal']">结束</el-button>
      </div>
      <el-table
        ref="singleTable"
        v-loading="listLoading"
        :data="dataList"
        border
        fit
        highlight-current-row
        @current-change="handleCurrentChange"
        style="width: 100%">
        <el-table-column type="index" align="center" width="50"></el-table-column>
        <el-table-column property="image" width="400" label="图片" show-overflow-tooltip>
          <template slot-scope="scope">
            <img height="80px" :src="$imagePath + scope.row.image"  style="vertical-align: middle;" />
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column property="productName" width="400" label="商品名称" show-overflow-tooltip></el-table-column>
        <el-table-column property="sellerName" width="200" label="所属商家"></el-table-column>
        <el-table-column property="typeName" width="200" label="分类名称"></el-table-column>
        <el-table-column property="saleNum" width="150" label="销量"></el-table-column>
        <el-table-column property="virtualSaleNum" width="150" label="虚拟销量"></el-table-column>
        <el-table-column property="marketPrice" width="150" label="原价或市场价"></el-table-column>
        <el-table-column property="price" width="150" label="团购价"></el-table-column>
        <el-table-column property="purchase" width="150" label="限购数量"></el-table-column>
        <el-table-column property="stock" width="150" label="库存"></el-table-column>
        <el-table-column property="channel" width="150" label="渠道">
          <template slot-scope="scope">
            {{ codeBox.CHANNEL[scope.row.channel] }}
          </template>
        </el-table-column>
        <el-table-column property="isBest" width="150" label="是否推荐">
          <template slot-scope="scope">
            {{ codeBox.YES_NO[scope.row.isBest] }}
          </template>
        </el-table-column>
        <el-table-column property="activityState" width="150" label="活动状态">
          <template slot-scope="scope">
            {{ codeBox.BIDDING_A_STATE[scope.row.activityState] }}
          </template>
        </el-table-column>
        <el-table-column property="state" width="150" label="审核状态">
          <template slot-scope="scope">
            {{ codeBox.BIDDING_STATE[scope.row.state] }}
          </template>
        </el-table-column>
        <el-table-column property="startTime" width="200" label="开始时间"></el-table-column>
        <el-table-column property="endTime" width="200" label="结束时间"></el-table-column>
        <el-table-column property="sortNum" width="200" label="排序"></el-table-column>
        <el-table-column property="createTime" width="200" label="创建时间"></el-table-column>
        <el-table-column property="updateTime" width="200" label="更新时间"></el-table-column>
        <el-table-column property="auditOpinion" width="200" label="审核意见"></el-table-column>
        <el-table-column fixed="right" label="操作" width="100" align="center">
          <template slot-scope="scope">
            <el-button @click="gridUpRow(scope.row)" type="text" size="small">通过</el-button>
            <el-button @click="gridDownRow(scope.row)" type="text" size="small">驳回</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

      <el-dialog title="修改" :visible.sync="dialogFormVisibleEdit">
        <el-form ref="actGroup" :rules="rules" :model="actGroup" label-position="right" label-width="100px" style="width: 700px;">
          <el-col :span="24">
            <el-form-item label="促销标题：">
              <div class="yxkj-word-black">{{ actGroup.name }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="关联商品：">
              <div class="yxkj-word-black">{{ actGroup.productName }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="所属商家：">
              <div class="yxkj-word-black">{{ actGroup.sellerName }}</div>
            </el-form-item>
          </el-col>
          <el-form-item label="权重" prop="sortNum">
             <el-input-number v-model="actGroup.sortNum" :min="0" :max="99" :precision="0"></el-input-number>
          </el-form-item>
          <el-form-item>
            <span class="form-word-hint">权重在0到99，权重越大，排序越靠前。</span>
          </el-form-item>
          <el-form-item label="虚拟销量" prop="virtualSaleNum">
             <el-input-number v-model="actGroup.virtualSaleNum" :min="0" :max="99999" :precision="0"></el-input-number>
          </el-form-item>
          <el-form-item>
            <span class="form-word-hint">设置之后，用户可以看到的销量是：实际销量+虚拟销量。</span>
          </el-form-item>
          <el-form-item label="是否推荐" prop="isBest">
            <el-radio-group v-model="actGroup.isBest">
              <el-radio v-for="item in isBests" :key="item.value" :label="item.value">{{item.name}}</el-radio>
            </el-radio-group>
            <span class="form-word-hint">默认展示推荐的，然后展示权重高的促销活动。</span>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisibleEdit = false">
            取消
          </el-button>
          <el-button type="primary" @click="updateSubmit()">
            提交
          </el-button>
        </div>
      </el-dialog>

      <el-dialog title="审核驳回" :visible.sync="dialogFormVisibleDown">
        <el-form ref="actGroupDown" :rules="rules" :model="actGroup" label-position="right" label-width="100px" style="width: 700px;">
          <el-col :span="24">
            <el-form-item label="促销标题：">
              <div class="yxkj-word-black">{{ actGroup.name }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="关联商品：">
              <div class="yxkj-word-black">{{ actGroup.productName }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="所属商家：">
              <div class="yxkj-word-black">{{ actGroup.sellerName }}</div>
            </el-form-item>
          </el-col>
          <el-form-item label="驳回意见" prop="auditOpinion">
             <el-col :span="20"><el-input v-model="actGroup.auditOpinion" type="textarea" :rows="2"/></el-col>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisibleDown = false">
            取消
          </el-button>
          <el-button type="primary" @click="gridDownSubmit()">
            提交
          </el-button>
        </div>
      </el-dialog>

  </div>
</template>

<script>
import { listActGroupInit,listActGroup,updateActGroup,
    releaseFinalActGroup,auditYesActGroup,auditNoActGroup} from '@/api/promotion'
import Pagination from '@/components/Pagination'
import { Message } from 'element-ui'
import { getCodeManager,codeToArray, uploadFileImage} from '@/api/all'
export default {
  name: 'grouplist',
  components: { Pagination },
  data() {
    return {
      currentRow: null,
      dataList: [],
      actGroupTypes: [],
      activityStates: [],
      states: [],
      isBests: [],
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        q_type: '',
        q_activityState: '',
        q_state: ''
      },
      dialogFormVisibleEdit: false,
      dialogFormVisibleDown: false,
      actGroup: {
        id: '',
        name: '',
        productName: '',
        sellerName: '',
        sortNum: 0,
        virtualSaleNum: 0,
        isBest: '0',
        auditOpinion: ''
      },
      rules: {
        sortNum: [{ required: true, message: '权重不能为空', trigger: 'blur' }],
        virtualSaleNum: [{ required: true, message: '虚拟销量不能为空', trigger: 'blur' }],
        isBest: [{ required: true, message: '是否推荐', trigger: "change" }],
        auditOpinion: [{ required: true, message: '请输入驳回意见', trigger: 'blur' },
            { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }],
      }
    }
  },
  created() {
    getCodeManager('BIDDING_STATE,BIDDING_A_STATE,CHANNEL,YES_NO', () => {
       this.activityStates = codeToArray('BIDDING_A_STATE');
       this.states = codeToArray('BIDDING_STATE');
       this.isBests = codeToArray('YES_NO');
    })
    listActGroupInit().then(response => {
      this.actGroupTypes=[
        ...response.data.data.actGroupTypes.map((item)=>{return  {
          name:item.name,
          value:item.id
        }})
      ]
    })
    this.getList()
  },
  methods:{
    handleCurrentChange(val) {
      // 选中当前行数据
      this.currentRow = val
    },
    // 获取列表数据
    getList() {
      this.listLoading = true
      listActGroup(this.listQuery).then(response => {
        this.dataList = response.data.rows
        this.total = response.data.total
        this.listLoading = false
      })
    },
    reset() {
      this.listQuery = {
        page: 1,
        limit: 20,
        q_type: '',
        q_activityState: '',
        q_state: ''
      }
      this.getList()
    },
    look() {
      if(this.currentRow == null) {
        Message.error('请选择一条记录')
        return
      }
      this.$router.push({
        path: "/promotion/grouplook",
        query: { id: this.currentRow.id }
      })
    },
    edit() {
      if(this.currentRow == null) {
        Message.error('请选择一条记录')
        return
      }
      if(this.currentRow.state == 1) {
        Message.error('先停止使用，再进行修改')
        return
      }
      this.actGroup = {
        id: this.currentRow.id,
        name: this.currentRow.name,
        productName: this.currentRow.productName,
        sellerName: this.currentRow.sellerName,
        sortNum: this.currentRow.sortNum,
        virtualSaleNum: this.currentRow.virtualSaleNum,
        isBest: '' + this.currentRow.isBest
      }
      this.dialogFormVisibleEdit = true
      this.$nextTick(() => {
        this.$refs['actGroup'].clearValidate()
      })
    },
    updateSubmit() {
      this.$refs['actGroup'].validate((valid) => {
        if (valid) {
          updateActGroup(this.actGroup).then(res => {
            if(!res.data.success) {
              Message.error(res.data.message);
              return;
            }
            this.dialogFormVisibleEdit = false
            this.getList()
            Message.success('操作成功')
          })
        }
      })
    },
    del() {
      if(this.currentRow == null) {
        Message.error('请选择一条记录')
        return
      }
      if(this.currentRow.state != 3) {
        Message.error('只能审核通过之后才能结束。')
        return
      }
      if(this.currentRow.activityState != 2) {
        Message.error('只有在发布状态下，才可以结束活动。')
        return
      }
      this.$confirm('确定要结束吗？活动一旦结束，操作是不可逆的。', '提示', {
        onfirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        releaseFinalActGroup({id: this.currentRow.id}).then(res => {
          if(res.data.success) {
            this.$message({
              type: 'success',
              message: '操作成功!'
            });
            this.getList()
          } else {
            this.$message({
              type: 'error',
              message: res.data.message
            });
          }
        })
      })
    },
    gridUp() {
      if(this.currentRow == null) {
        Message.error('请选择一条记录')
        return
      }
      if(this.currentRow.state != 2) {
        Message.error('只有提交审核通过的活动，才能进行审核操作')
        return
      }
      this.$confirm('确定要审核通过吗？', '提示', {
        onfirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        auditYesActGroup({id: this.currentRow.id}).then(res => {
          if(res.data.success) {
            this.$message({
              type: 'success',
              message: '操作成功!'
            });
            this.getList()
          } else {
            this.$message({
              type: 'error',
              message: res.data.message
            });
          }
        })
      })
    },
    gridDown() {
      if(this.currentRow == null) {
        Message.error('请选择一条记录')
        return
      }
      if(this.currentRow.state != 2) {
        Message.error('只有提交审核，才能进行审核失败操作。')
        return
      }
      this.actGroup = {
        id: this.currentRow.id,
        name: this.currentRow.name,
        productName: this.currentRow.productName,
        sellerName: this.currentRow.sellerName,
        auditOpinion: ''
      }
      this.dialogFormVisibleDown = true
      this.$nextTick(() => {
        this.$refs['actGroup'].clearValidate()
      })
    },
    gridDownSubmit(){
      this.$refs['actGroupDown'].validate((valid) => {
        if (valid) {
          auditNoActGroup(this.actGroup).then(res => {
            if(!res.data.success) {
              Message.error(res.data.message);
              return;
            }
            this.dialogFormVisibleDown = false
            this.getList()
            Message.success('操作成功')
          })
        }
      })
    },
    gridUpRow(currentRowSelect) {
      if(currentRowSelect.state != 2) {
        Message.error('只有提交审核通过的活动，才能进行审核操作')
        return
      }
      this.$confirm('确定要审核通过吗？', '提示', {
        onfirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        auditYesActGroup({id: currentRowSelect.id}).then(res => {
          if(res.data.success) {
            this.$message({
              type: 'success',
              message: '操作成功!'
            });
            this.getList()
          } else {
            this.$message({
              type: 'error',
              message: res.data.message
            });
          }
        })
      })
    },
    gridDownRow(currentRowSelect) {
      if(currentRowSelect == null) {
        Message.error('请选择一条记录')
        return
      }
      if(currentRowSelect.state != 2) {
        Message.error('只有提交审核，才能进行审核失败操作。')
        return
      }
      this.actGroup = {
        id: currentRowSelect.id,
        name: currentRowSelect.name,
        productName: currentRowSelect.productName,
        sellerName: currentRowSelect.sellerName,
        auditOpinion: ''
      }
      this.dialogFormVisibleDown = true
      this.$nextTick(() => {
        this.$refs['actGroup'].clearValidate()
      })
    }

  }
}
</script>
<style scoped>
/deep/ .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  /deep/ .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  /deep/ [class*=el-col-] {
    float: none;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    display: block;
    height: 150px;
  }
</style>
